<template>
    <div>
        <!-- 查询表单 -->
        <div class="search-bar">
            <el-form :inline="true" :model="formParams" size="mini" label-width="90px" ref="searchForm" :rules="rules">
                <el-row :gutter="10">
                    <el-select v-model="sortField" size="small" placeholder="排序字段"
                        style="margin-left: 10px; width: 140px">
                        <el-option label="距上次观看" value="daysSinceLast"></el-option>
                        <el-option label="观看次数" value="watchCount"></el-option>
                        <el-option label="评分" value="score"></el-option>
                        <el-option label="上映日期" value="releaseDate"></el-option>
                    </el-select>

                    <el-button type="text" size="small" @click="toggleSortOrder">
                        {{ sortOrder === 'asc' ? '升序' : '降序' }}
                        <i :class="sortOrder === 'asc' ? 'el-icon-top' : 'el-icon-bottom'"></i>
                    </el-button>
                </el-row>
                <el-row :gutter="10">
                    <!-- 常用条件（默认显示） -->
                    <el-col :span="6">
                        <el-form-item label="电影名称">
                            <el-input v-model="formParams.movieName" placeholder="请输入电影名称"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="观看日期" prop="watchDate">
                            <el-date-picker v-model="formParams.watchDate" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="下載情况">
                            <el-select v-model="formParams.downloadStatus" clearable placeholder="请选择">
                                <el-option label="已下載" :value="true"></el-option>
                                <el-option label="未下載" :value="false"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="下載情况">
                            <el-select v-model="formParams.collected" clearable placeholder="请选择">
                                <el-option label="已收藏" :value="true"></el-option>
                                <el-option label="未收藏" :value="false"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <!-- 其他条件（可折叠） -->
                    <template v-if="showMore">
                        <el-col :span="6">
                            <el-form-item label="目标分辨率">
                                <el-select v-model="formParams.downloadTarget" clearable placeholder="收藏分辨率目标">
                                    <el-option label="4K" value="4K"></el-option>
                                    <el-option label="1080p" value="1080p"></el-option>
                                    <el-option label="720p" value="720p"></el-option>
                                    <el-option label="蓝光" value="蓝光"></el-option>
                                    <el-option label="原盘" value="原盘"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item label="清晰度后缀">
                                <el-select v-model="formParams.suffix" clearable placeholder="收藏清晰度后缀">
                                    <el-option label="HDR" value="HDR"></el-option>
                                    <el-option label="IMAX" value="IMAX"></el-option>
                                    <el-option label="杜比" value="杜比"></el-option>
                                    <el-option label="高码率" value="高码率"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item label="演员">
                                <el-input v-model="formParams.actor" placeholder="请输入演员"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="上映日期" prop="releaseDate">
                                <el-date-picker v-model="formParams.releaseDate" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                            </el-form-item>
                        </el-col>

                        <el-col :span="10">
                            <el-form-item label="距上次观看" prop="lastWatchDate">
                                <el-input-number v-model="formParams.sinceLastWatchYears" :min="0" placeholder="年"
                                    style="width: 90px"></el-input-number>
                                <span style="margin: 0 4px">年</span>

                                <el-input-number v-model="formParams.sinceLastWatchMonths" :min="0" placeholder="月"
                                    style="width: 90px"></el-input-number>
                                <span style="margin: 0 4px">月</span>

                                <el-input-number v-model="formParams.sinceLastWatchDaysPart" :min="0" placeholder="天"
                                    style="width: 90px"></el-input-number>
                                <span style="margin: 0 4px">天</span>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="观看次数" prop="watchRange">
                                <el-input-number v-model="formParams.watchMin" :min="0"
                                    placeholder="最小"></el-input-number>
                                -
                                <el-input-number v-model="formParams.watchMax" :min="0"
                                    placeholder="最大"></el-input-number>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="评分区间" prop="scoreRange">
                                <el-input-number v-model="formParams.scoreMin" :min="0" :max="10"
                                    placeholder="最低"></el-input-number>
                                -
                                <el-input-number v-model="formParams.scoreMax" :min="0" :max="10"
                                    placeholder="最高"></el-input-number>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item label="观看地点">
                                <el-input v-model="formParams.address" placeholder="如 家/影院"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="陪同人员">
                                <el-select v-model="formParams.accompany" multiple filterable clearable
                                    placeholder="选择陪同人员" style="width: 200px">
                                    <el-option v-for="p in accompanyOptions" :key="p" :label="p" :value="p" />
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="8">
                            <el-form-item label="观看进度" prop="progressRange">
                                <el-input-number v-model="formParams.progressMin" :min="0" :max="100"
                                    placeholder="最小"></el-input-number>
                                -
                                <el-input-number v-model="formParams.progressMax" :min="0" :max="100"
                                    placeholder="最大"></el-input-number>
                            </el-form-item>
                        </el-col>
                    </template>
                </el-row>

                <!-- 操作按钮 -->
                <el-form-item style="margin-left: 20px">
                    <el-button :loading="loading" size="small" type="primary" @click="onsubmit"
                        icon="el-icon-search">查询</el-button>
                    <el-button icon="el-icon-refresh-right" :loading="loading" size="small"
                        @click="reset">重置</el-button>
                    <el-button type="text" size="small" @click="showMore = !showMore">
                        {{ showMore ? '收起' : '更多' }}
                        <i :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 工具栏 -->
        <div class="tab-bar fixed-bar">
            <el-popover placement="top-start" width="400" trigger="hover">
                <div class="word-title">4K+HDR 杜比 50~100G</div>
                <div class="word-page">预计100部;占用空间7.5T</div>
                变形金刚、指环王、哈利波特和氛围感电影（北欧人、遗落战境）系列
                <div class="word-title">4K(+高码率)10~20G</div>
                <div class="word-page">预计400部;占用空间6T</div>
                漫威、DC、权力的游戏、最后的生还者
                <div class="word-title">1080p 2~10g</div>
                <div class="word-page">预计500部;占用空间2.5T</div>
                小众电影、3级片、剧情片
                <div class="word-title">总计16T</div>
                <el-button slot="reference">8T+6T网盘收藏;1000部</el-button>
            </el-popover>

            <el-popover placement="top-start" width="400" trigger="hover">
                <div class="word-title">4K+HDR 杜比 50~100G</div>
                <div class="word-page">预计500部;占用空间37.5T</div>
                <div class="word-title">4K(+高码率、高帧率) 10~20G</div>
                <div class="word-page">预计2000部;占用空间30T</div>
                <div class="word-title">1080p 2~10g</div>
                <div class="word-page">预计2500部;占用空间12.5T</div>
                <div class="word-title">总计80T</div>
                <el-button slot="reference">NAS收藏;5000部</el-button>
            </el-popover>
            <el-popover placement="top-start" width="400" trigger="hover">
                <div>
                    
                </div>
                <el-button slot="reference">标准</el-button>
            </el-popover>
            <div>
                观影数量:<span style="font-weight: 600">{{ movieList.length }}</span>
            </div>
            <div style="margin-left: 10px">观影总次数:{{ sumWatch() }}</div>
            <el-switch style="margin-left: auto; margin-right: 10px" v-model="CalendarOrCard" active-text="日历"
                inactive-text="卡片">
            </el-switch>
            <el-radio-group size="small">
                <el-radio-button label="观影记录"></el-radio-button>
                <el-radio-button label="待观看"></el-radio-button>
                <el-radio-button label="我的收藏"></el-radio-button>
            </el-radio-group>
            <el-button type="text" style="margin-left: 8px" @click="add()">+新增</el-button>

            <el-button size="small" type="primary" :loading="loading_export" @click="exportExcel">导出电影信息</el-button>
            <el-button size="small" type="primary" :loading="loading_export" @click="exportExcel">导出每次观影记录</el-button>
        </div>

        <!-- 下面部分保持不变 ... -->
        <!-- 卡片模式 -->
        <div v-if="!CalendarOrCard" class="flex_container">
            <movieCard v-for="(item, index) in movieList.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
            )" :key="index" :details="item"></movieCard>
            <div class="empty_card"></div>
            <div class="empty_card"></div>
            <div class="empty_card"></div>
            <div class="empty_card"></div>
            <div class="empty_card"></div>
        </div>

        <!-- 日历模式 -->
        <div v-else class="calendar-wrap">
            <!-- 年份跳转 -->
            <div style="margin-bottom:10px;">
                <el-input-number v-model="calendarYear" :min="2000" :max="2050" size="small" @change="onYearChange"
                    label="年份"></el-input-number>
            </div>
            <el-calendar v-model="calendarDate" :first-day-of-week="1">
                <template slot="dateCell" slot-scope="{ date }">
                    <div class="calendar-cell">
                        <div class="date-number">{{ date.getDate() }}</div>
                        <ul class="movie-list" v-if="recordsByDate(formatDate(date)).length">
                            <li class="movie-item" v-for="(entry, idx) in recordsByDate(formatDate(date))"
                                :key="formatDate(date) + '-' + idx">
                                <el-popover placement="top" width="320" trigger="hover" :visible-arrow="true">
                                    <div class="popover-content">
                                        <div class="movie-title">{{ entry.movie }}</div>
                                        <div class="movie-meta">
                                            <div v-for="(t, i) in getAllRecords(entry.movie)" :key="i">
                                                <el-link type="primary" @click.prevent="goToDate(t.time)">{{
                                                    formatRecordLabel(t) }}</el-link>
                                            </div>
                                        </div>
                                    </div>
                                    <span slot="reference" class="movie-name" @click="openEntry(entry)">
                                        {{ truncate(entry.movieName, 18) }} (第{{ entry.watchIndex }}次)
                                    </span>
                                </el-popover>
                            </li>
                        </ul>
                        <div v-else class="no-movie">-</div>
                    </div>
                </template>
            </el-calendar>
        </div>

        <!-- 分页（仅卡片模式） -->
        <el-pagination v-if="!CalendarOrCard" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="[25, 50, 75, 100]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="movieList.length"
            style="float: right; margin-top: 15px"></el-pagination>

        <!-- 弹窗：新增/编辑 -->
        <el-dialog title="新增/编辑" :visible.sync="dialogFormVisible" width="60%">
            <dialog_edit :dialog_form_Props_obj="dialog_form_Props_obj" @confirm="eidt_confirm_father"
                @cancel="eidt_cancel_father"></dialog_edit>
        </el-dialog>
    </div>
</template>

<script>
import * as lang from './lang'
import movieCard from './movieCard.vue'
import dialog_edit from './dialog_edit.vue'
import * as XLSX from 'xlsx'
import { saveAs } from 'file-saver'

export default {
    components: { movieCard, dialog_edit },
    data () {
        return {
            loading_export: false,
            sortField: '',      // 当前排序字段
            sortOrder: 'asc',   // asc 升序, desc 降序
            showMore: false, // 控制展开/收起
            movieList: [],
            config: lang.default,
            currentPage: 1,
            pageSize: 25,
            dialog_form_Props_obj: { movieName: '' },
            dialogFormVisible: false,
            CalendarOrCard: false,
            formParams: {
                accompany: [],
                // 距上次观看
                sinceLastWatchDays: null,      // 直接输入天数
                sinceLastWatchYears: null,     // 年
                sinceLastWatchMonths: null,    // 月
                sinceLastWatchDaysPart: null,  // 天
            },
            accompanyOptions: ["家人", "朋友", "同事", "恋人", "独自"],
            rules: {
                scoreRange: [
                    {
                        validator: (rule, value, callback) => {
                            if (
                                this.formParams.scoreMin != null &&
                                this.formParams.scoreMax != null &&
                                this.formParams.scoreMin > this.formParams.scoreMax
                            ) {
                                callback(new Error("最低分不能大于最高分"));
                            } else callback();
                        },
                        trigger: "blur",
                    },
                ],
                watchRange: [
                    {
                        validator: (rule, value, callback) => {
                            if (
                                this.formParams.watchMin != null &&
                                this.formParams.watchMax != null &&
                                this.formParams.watchMin > this.formParams.watchMax
                            ) {
                                callback(new Error("最小次数不能大于最大次数"));
                            } else callback();
                        },
                        trigger: "blur",
                    },
                ],
                progressRange: [
                    {
                        validator: (rule, value, callback) => {
                            if (
                                this.formParams.progressMin != null &&
                                this.formParams.progressMax != null &&
                                this.formParams.progressMin > this.formParams.progressMax
                            ) {
                                callback(new Error("进度区间不合理"));
                            } else callback();
                        },
                        trigger: "blur",
                    },
                ],
                releaseDate: [
                    {
                        validator: (rule, value, callback) => {
                            if (
                                this.formParams.releaseDate &&
                                this.formParams.releaseDate.length === 2 &&
                                new Date(this.formParams.releaseDate[0]) > new Date(this.formParams.releaseDate[1])
                            ) {
                                callback(new Error("上映日期区间不合理"));
                            } else callback();
                        },
                        trigger: "change",
                    },
                ],
                watchDate: [
                    {
                        validator: (rule, value, callback) => {
                            if (
                                this.formParams.watchDate &&
                                this.formParams.watchDate.length === 2 &&
                                new Date(this.formParams.watchDate[0]) > new Date(this.formParams.watchDate[1])
                            ) {
                                callback(new Error("观看日期区间不合理"));
                            } else callback();
                        },
                        trigger: "change",
                    },
                ],
            },
            loading: false,
            calendarDate: new Date(),
            calendarYear: new Date().getFullYear(),
        }
    },
    created () {
        this.movieList = this.config.movie.map(movie => {
            // 过滤出有合法 time 的记录
            const validRecords = movie.total.filter(item => item.time && this.parseDate(item.time));

            if (validRecords.length > 0) {
                // 找到最近一次观看日期
                const latestRecord = validRecords.reduce((latest, item) => {
                    const d = this.parseDate(item.time);
                    return d && (!latest || d > latest) ? d : latest;
                }, null);

                if (latestRecord) {
                    const today = new Date();
                    const diff = Math.floor((today - latestRecord) / (1000 * 60 * 60 * 24)); // 天数
                    movie.daysSinceLast = diff;
                } else {
                    movie.daysSinceLast = null;
                }
            } else {
                movie.daysSinceLast = null;
            }

            return movie;
        });
        console.log('初始数据:', this.movieList)
    },

    computed: {
        dateRecordMap () {
            const map = {}
            const toKey = this._toDateKey
            this.movieList.forEach(m => {
                (m.total || []).forEach((t, idx) => {
                    const key = toKey(t.time)
                    if (!key) return
                    if (!map[key]) map[key] = []
                    map[key].push(Object.assign({ movieName: m.movieName, watchIndex: idx + 1 }, t))
                })
            })
            return map
        },
    },
    methods: {
        exportExcel () {
            this.loading_export = true
            const rows = []

            // 遍历 movies
            this.movieList.forEach(movie => {
                movie.total.forEach(record => {
                    rows.push({
                        '电影名称movieName': movie.movieName,
                        '个人评分score': '',
                        '建议收藏分辨率downloadTarget': '',
                        '下載情況downloadStatus': '',
                        '收藏情况collected': '',
                        '观看时间time': record.time,
                        '观看地点address': record.address,
                        '陪同人员accompany': record.accompany.join(','),
                        '观看进度progress': record.progress,
                    })
                })
            })

            // 转成 worksheet
            const worksheet = XLSX.utils.json_to_sheet(rows)
            const workbook = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(workbook, worksheet, '观影记录')

            // 生成 Excel 文件并下载
            const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
            saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '观影记录.xlsx')
            setTimeout(() => {
                this.loading_export = false
            }, 500)
        },

        // 切换升序/降序
        toggleSortOrder () {
            this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
            this.getTableData();
        },

        // 排序方法
        sortData (data) {
            if (!this.sortField) return data;

            return data.slice().sort((a, b) => {
                let valA, valB;

                switch (this.sortField) {
                    case 'daysSinceLast':
                        valA = (a.daysSinceLast !== null && a.daysSinceLast !== undefined) ? a.daysSinceLast : Infinity;
                        valB = (b.daysSinceLast !== null && b.daysSinceLast !== undefined) ? b.daysSinceLast : Infinity;
                        break;
                    case 'watchCount':
                        valA = a.total ? a.total.length : 0;
                        valB = b.total ? b.total.length : 0;
                        break;
                    case 'score':
                        valA = (a.score !== null && a.score !== undefined) ? a.score : 0;
                        valB = (b.score !== null && b.score !== undefined) ? b.score : 0;
                        break;
                    case 'releaseDate':
                        // 取上映日期最早的 time
                        var dA = (a.total || []).map(function (t) {
                            return _this3.parseDate(t.time);
                        }).filter(function (d) { return !!d; }).sort(function (x, y) { return x - y; });
                        var dB = (b.total || []).map(function (t) {
                            return _this3.parseDate(t.time);
                        }).filter(function (d) { return !!d; }).sort(function (x, y) { return x - y; });
                        valA = dA ? dA.getTime() : 0;
                        valB = dB ? dB.getTime() : 0;
                        break;
                    default:
                        return 0;
                }
                return this.sortOrder === 'asc' ? valA - valB : valB - valA;
            });
        },
        /**
         * 解析 time 为 Date 对象
         * time 可能是 YYYY-MM-DD / YYYY-MM / YYYY
         */
        parseDate (str) {
            if (!str) return null;
            let parts = str.split('-');
            let year = parseInt(parts[0], 10);
            let month = parts[1] ? parseInt(parts[1], 10) - 1 : 0; // 默认 1 月
            let day = parts[2] ? parseInt(parts[2], 10) : 1; // 默认 1 号

            let d = new Date(year, month, day);
            return isNaN(d.getTime()) ? null : d;
        },
        // 模拟后端查询
        getTableData () {
            this.loading = true
            setTimeout(() => {
                let data = [...this.config.movie]
                const p = this.formParams

                // 🔽 这里是你已有的过滤条件（不动）
                if (p.movieName) {
                    data = data.filter(m => m.movieName.includes(p.movieName))
                }
                if (p.downloadTarget) {
                    data = data.filter(m => m.downloadTarget === p.downloadTarget)
                }
                if (p.scoreMin != null) {
                    data = data.filter(m => m.score >= p.scoreMin)
                }
                if (p.scoreMax != null) {
                    data = data.filter(m => m.score <= p.scoreMax)
                }
                if (p.watchMin != null) {
                    data = data.filter(function (m) {
                        return ((m.total && m.total.length) || 0) >= p.watchMin;
                    });
                }
                if (p.watchMax != null) {
                    data = data.filter(function (m) {
                        return ((m.total && m.total.length) || 0) >= p.watchMax;
                    });
                }
                if (p.address) {
                    data = data.filter(m => (m.total || []).some(t => t.address && t.address.includes(p.address)))
                }
                if (p.accompany) {
                    data = data.filter(m => (m.total || []).some(t => (t.accompany || []).join(',').includes(p.accompany)))
                }
                if (p.progressMin != null) {
                    data = data.filter(m => (m.total || []).some(t => t.progress >= p.progressMin))
                }
                if (p.progressMax != null) {
                    data = data.filter(m => (m.total || []).some(t => t.progress <= p.progressMax))
                }

                // 🔽 排序在最后执行
                data = this.sortData(data);

                this.movieList = data
                console.log('过滤+排序后数据:', this.movieList)
                this.loading = false
            }, 600)
        },
        onsubmit () {
            this.$refs.searchForm.validate((valid) => {
                if (!valid) {
                    this.$message.error("请修正表单校验错误后再查询");
                    return;
                }

                // 距上次观看处理
                let totalDays = null;
                if (this.formParams.sinceLastWatchDays != null) {
                    // 直接输入天数
                    totalDays = this.formParams.sinceLastWatchDays;
                } else if (
                    this.formParams.sinceLastWatchYears != null ||
                    this.formParams.sinceLastWatchMonths != null ||
                    this.formParams.sinceLastWatchDaysPart != null
                ) {
                    // 年月日转化为天（粗略计算：1年=365天，1月=30天）
                    totalDays =
                        (this.formParams.sinceLastWatchYears || 0) * 365 +
                        (this.formParams.sinceLastWatchMonths || 0) * 30 +
                        (this.formParams.sinceLastWatchDaysPart || 0);
                }

                if (totalDays != null) {
                    this.formParams.daysSinceLast = totalDays;
                }

                this.getTableData();
            });
        },

        handleSizeChange (val) { this.pageSize = val; this.getTableData() },
        handleCurrentChange (val) { this.currentPage = val; this.getTableData() },
        reset () {
            this.currentPage = 1
            this.pageSize = 25
            this.formParams = { accompany: [] };
            this.getTableData()
        },
        sumWatch () {
            return this.movieList.reduce((sum, m) => sum + (m.total ? m.total.length : 0), 0)
        },
        add () {
            this.dialog_form_Props_obj = { movieName: '' }
            this.dialogFormVisible = true
        },
        openEntry (entry) {
            this.dialog_form_Props_obj = { ...entry }
            this.dialogFormVisible = true
        },
        // 新增方法
        getAllRecords (movieName) {
            const movie = this.movieList.find(m => m.movie === movieName)
            if (!movie || !movie.total) return []
            return movie.total.map((t, idx) => Object.assign({ watchIndex: idx + 1 }, t, { movie: movieName }))
        },
        formatRecordLabel (entry) {
            return `${entry.movieName} (${entry.watchIndex}次) - ${entry.time}`
        },
        goToDate (timeStr) {
            const dateKey = this._toDateKey(timeStr)
            if (!dateKey) return
            const parts = dateKey.split('-')
            this.calendarDate = new Date(parts[0], parts[1] - 1, parts[2])
        },
        onYearChange (val) {
            // 设置日历年份
            const current = this.calendarDate
            this.calendarDate = new Date(val, current.getMonth(), current.getDate())
        },

        formatDate (date) {
            const y = date.getFullYear()
            const m = (date.getMonth() + 1).toString().padStart(2, '0')
            const d = date.getDate().toString().padStart(2, '0')
            return `${y}-${m}-${d}`
        },
        _toDateKey (timeStr) {
            if (!timeStr && timeStr !== 0) return null
            let s = String(timeStr).trim()
            s = s.replace(/\//g, '-')
            if (/^\d{10,}$/.test(s)) {
                const ts = Number(s.length === 10 ? s * 1000 : s)
                const d = new Date(ts)
                if (!isNaN(d)) return this.formatDate(d)
            }
            if (/^\d{4}-\d{1,2}-\d{1,2}$/.test(s)) {
                const parts = s.split('-')
                const y = parts[0], m = parts[1].padStart(2, '0'), d = parts[2].padStart(2, '0')
                return `${y}-${m}-${d}`
            }
            if (/^\d{4}-\d{1,2}$/.test(s)) {
                const parts = s.split('-')
                return `${parts[0]}-${parts[1].padStart(2, '0')}-01`
            }
            if (/^\d{4}$/.test(s)) {
                return `${s}-01-01`
            }
            const d = new Date(s)
            if (!isNaN(d)) return this.formatDate(d)
            return null
        },
        recordsByDate (dateKey) {
            return this.dateRecordMap[dateKey] ? this.dateRecordMap[dateKey] : []
        },
        truncate (str, len = 18) {
            if (!str) return ''
            if (str.length <= len) return str
            return str.slice(0, len - 1) + '…'
        }, eidt_confirm_father () { this.dialogFormVisible = false },
        eidt_cancel_father () { this.dialogFormVisible = false },
    }
}
</script>


<style scoped>
.tab-bar {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    padding: 10px 0;
    justify-content: center;
}

.flex_container {
    background-color: #2f2f2f;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 8px;
}

.flex_container>div {
    margin: 5px;
    flex: 1;
    min-width: 380px;
}

.empty_card {
    height: 0;
    margin-top: 0;
    margin-right: 18px;
}

.fixed-bar {
    display: flex;
    align-items: center;
    padding: 0 15px;
}

/* 日历 */
.calendar-wrap {
    padding: 12px;
}

.calendar-cell {
    min-height: 90px;
    padding: 6px;
    box-sizing: border-box;
}

.date-number {
    font-size: 12px;
    font-weight: 700;
    color: #333;
}

.movie-list {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    max-height: 68px;
    overflow-y: auto;
}

.movie-item {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1;
}

.movie-name {
    display: inline-block;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    color: #409EFF;
}

.no-movie {
    color: #c0c4cc;
    font-size: 12px;
    margin-top: 6px;
}

.popover-content {
    font-size: 13px;
}

.popover-content .movie-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.popover-content .movie-meta div {
    margin-bottom: 4px;
    color: #555;
    font-size: 13px;
}


.fixed-bar {
  display: flex;
  align-items: center;
  padding: 0px 15px;
}

.word-title {
  font-weight: 600;
  font-size: 16px;
  color: black;
  margin: 3px 0;
}
.word-page {
  font-size: 14px;
  color: black;
  margin: 3px 0;
}
</style>
